<script setup lang="ts">
  import { computed, ref, watch } from 'vue';
  import { addCommit, editDoc, getCommentList } from '@/api/dashboard';
  import { FormInstance, Message, Pagination } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';
  import { omit } from 'lodash';
  import { useUserStore } from '@/store';

  const formRef = ref<FormInstance | null>(null);

  const props = defineProps({
    visible: Boolean,
    params: Object,
  });

  const commenttext = ref('');
  const list = ref([]);
  const total = ref(0); // 总评论数
  const pageSize = ref(10); // 每页10条
  const currentPage = ref(1); // 当前页码
  const { loading, setLoading } = useLoading(false);

  watch(
    () => props.params,
    (newVal) => {
      if (newVal?.id) {
        fetchCommentList(); // 加载评论列表
      }
    },
    {
      deep: true,
      immediate: true,
    }
  );

  const userStore = useUserStore();
  const emit = defineEmits(['update:visible', 'refresh']);

  const avatar = computed(() => {
    if (userStore.user_avatar) {
      return import.meta.env.VITE_FILE_PATH + userStore.user_avatar;
    } else {
      return false;
    }
  });

  // 获取评论列表
  function fetchCommentList() {
    setLoading(true);
    getCommentList({
      comment_doc_id: props.params?.id,
      page_no: currentPage.value,
      page_size: pageSize.value,
    })
      .then((res) => {
        res?.data?.list.forEach((item: any) => {
          item.comment_user_avatar =
            import.meta.env.VITE_FILE_PATH + item.comment_user_avatar;
        });

        list.value = res.data.list || [];
        total.value = res.data.total || 0;
      })
      .finally(() => {
        setLoading(false);
      });
  }

  // 分页变更事件
  function handlePageChange(page: number) {
    currentPage.value = page;
    fetchCommentList();
  }

  function addComment() {
    setLoading(true);
    addCommit({
      comment_doc_id: props.params?.id,
      comment_content: commenttext.value,
    })
      .then((res) => {
        if (res.code === 200) {
          Message.success(res.msg);
          commenttext.value = '';
          // 提交成功后刷新第一页
          currentPage.value = 1;
          fetchCommentList();
        }
      })
      .finally(() => {
        setLoading(false);
      });
  }
</script>

<template>
  <a-modal
    title="文档评论"
    :visible="visible"
    @ok="handleSubmit"
    title-align="start"
    :ok-loading="loading"
    width="800px"
    :footer="false"
    @cancel="
      () => {
        emit('update:visible', false);
      }
    "
  >
    <div
      style="
        margin-bottom: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
      "
    >
      <div style="margin-right: 10px">
        <a-avatar shape="circle" style="height: 30px; width: 30px">
          <img v-if="avatar" :src="avatar" />
          <span v-else>{{ userStore.user_name }}</span>
        </a-avatar>
      </div>
      <a-input
        v-model="commenttext"
        placeholder=" 字里行间, 藏着暖意, 评论区也有小温馨"
      />
      <a-button
        :disabled="commenttext.length === 0"
        style="margin-left: 10px"
        type="primary"
        @click="addComment"
        :loading="loading"
      >
        提交
      </a-button>
    </div>
    <a-list :data="list" :loading="loading">
      <a-list-item
        v-for="(item, index) in list"
        :key="item.comment_id || index"
      >
        <a-comment
          :author="item.comment_user_name"
          :avatar="item.comment_user_avatar"
          :content="item.comment_content"
          :datetime="item.create_time"
        >
          <template #actions>
            <!-- 操作按钮 -->
          </template>
        </a-comment>
      </a-list-item>
    </a-list>

    <!-- 分页组件 -->
    <slot name="footer">
      <div
        class="mt-4 flex justify-center"
        style="display: flex; align-items: flex-end; justify-content: flex-end"
      >
        <a-pagination
          v-model:current="currentPage"
          :total="total"
          :page-size="pageSize"
          @change="handlePageChange"
          show-total
        />
      </div>
    </slot>
  </a-modal>
</template>

<style scoped lang="less">
  .mt-4 {
    margin-top: 1rem;
  }
  .flex {
    display: flex;
  }
  .justify-center {
    justify-content: center;
  }
</style>
